<template>
  <div class="user-detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" type="primary" plain>
          <i class="fa fa-arrow-left"></i> 返回
        </el-button>
        <h1>用户详情</h1>
      </div>
      <div class="header-right">
        <el-button type="warning" @click="editUser">
          <i class="fa fa-edit"></i> 编辑用户
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 用户信息 -->
    <div v-else-if="userInfo" class="user-content">
      <!-- 基本信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <i class="fa fa-user"></i>
            <span>基本信息</span>
          </div>
        </template>
        <div class="user-basic-info">
          <div class="avatar-section">
            <el-avatar :size="80" :src="userInfo.avatar">
              <i class="fa fa-user"></i>
            </el-avatar>
            <div class="status-badge">
              <el-tag :type="userInfo.is_active ? 'success' : 'danger'" size="large">
                {{ userInfo.is_active ? '激活' : '禁用' }}
              </el-tag>
            </div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <label>用户ID:</label>
              <span>{{ userInfo.id }}</span>
            </div>
            <div class="info-item">
              <label>用户名:</label>
              <span>{{ userInfo.username }}</span>
            </div>
            <div class="info-item">
              <label>邮箱:</label>
              <span>{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <label>中文名:</label>
              <span>{{ userInfo.chinese_name || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>创建时间:</label>
              <span>{{ formatDateTime(userInfo.date_joined) }}</span>
            </div>
            <div class="info-item">
              <label>最后登录:</label>
              <span>{{ formatDateTime(userInfo.last_login) }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 用户组信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <i class="fa fa-users"></i>
            <span>用户组信息</span>
          </div>
        </template>
        <div class="groups-info">
          <div v-if="userInfo.groups && userInfo.groups.length > 0" class="groups-list">
            <el-tag
              v-for="group in userInfo.groups"
              :key="group.id"
              size="large"
              class="group-tag"
            >
              {{ group.name }}
            </el-tag>
          </div>
          <div v-else class="no-groups">
            <el-empty description="该用户未分配任何用户组" />
          </div>
        </div>
      </el-card>

      <!-- 权限信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <i class="fa fa-shield"></i>
            <span>权限信息</span>
          </div>
        </template>
        <div class="permissions-info">
          <div class="permission-item">
            <label>超级用户:</label>
            <el-tag :type="userInfo.is_superuser ? 'danger' : 'info'">
              {{ userInfo.is_superuser ? '是' : '否' }}
            </el-tag>
          </div>
          <div class="permission-item">
            <label>管理员:</label>
            <el-tag :type="userInfo.is_staff ? 'warning' : 'info'">
              {{ userInfo.is_staff ? '是' : '否' }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-container">
      <el-result icon="error" title="加载失败" sub-title="无法获取用户信息">
        <template #extra>
          <el-button type="primary" @click="fetchUserDetail">重试</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()
const route = useRoute()

// 响应式数据
const loading = ref(true)
const userInfo = ref(null)

// 获取用户详情
const fetchUserDetail = async () => {
  loading.value = true
  try {
    const userId = route.params.id
    const response = await axios.get(`/api/users/${userId}/`)

    // 处理响应数据
    if (response.data) {
      userInfo.value = response.data
    } else {
      throw new Error('用户数据为空')
    }
  } catch (error) {
    console.error('获取用户详情失败:', error)
    ElMessage.error('获取用户详情失败')
    userInfo.value = null
  } finally {
    loading.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '从未'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 编辑用户
const editUser = () => {
  ElMessage.info('编辑用户功能开发中')
}

// 页面初始化
onMounted(() => {
  fetchUserDetail()
})
</script>

<style lang="scss" scoped>
.user-detail-container {
  padding: 20px;
  background: linear-gradient(135deg, #0f1327 0%, #1a2332 50%, #0f1327 100%);
  min-height: 100vh;
  color: #e6e6e6;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;

  .header-left {
    display: flex;
    align-items: center;
    gap: 20px;

    h1 {
      color: #8b5cf6;
      margin: 0;
      text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
      font-size: 32px;
      font-weight: 700;
    }
  }
}

.loading-container {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 10px;
  padding: 30px;
}

.user-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 10px;

  :deep(.el-card__header) {
    background: rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    padding: 20px;

    .card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #8b5cf6;
      font-weight: 600;
      font-size: 18px;

      i {
        font-size: 20px;
      }
    }
  }

  :deep(.el-card__body) {
    background: transparent;
    padding: 30px;
  }
}

.user-basic-info {
  display: flex;
  gap: 30px;
  align-items: flex-start;

  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    .status-badge {
      margin-top: 10px;
    }
  }

  .info-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;

    .info-item {
      display: flex;
      align-items: center;
      gap: 10px;

      label {
        font-weight: 600;
        color: #8b5cf6;
        min-width: 100px;
      }

      span {
        color: #e6e6e6;
        flex: 1;
      }
    }
  }
}

.groups-info {
  .groups-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .group-tag {
      padding: 8px 16px;
      font-size: 14px;
    }
  }

  .no-groups {
    text-align: center;
    padding: 20px;
  }
}

.permissions-info {
  display: flex;
  gap: 30px;

  .permission-item {
    display: flex;
    align-items: center;
    gap: 10px;

    label {
      font-weight: 600;
      color: #8b5cf6;
      min-width: 80px;
    }
  }
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;

  &.el-button--primary {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;

    &:hover {
      background: linear-gradient(135deg, #7c3aed, #5b21b6);
    }

    &.is-plain {
      background: transparent;
      border: 1px solid #8b5cf6;
      color: #8b5cf6;

      &:hover {
        background: rgba(139, 92, 246, 0.1);
      }
    }
  }

  &.el-button--warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;

    &:hover {
      background: linear-gradient(135deg, #d97706, #b45309);
    }
  }
}

:deep(.el-avatar) {
  background: rgba(139, 92, 246, 0.2);
  border: 2px solid rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

:deep(.el-tag) {
  border-radius: 4px;
  font-weight: 500;
}

:deep(.el-empty) {
  .el-empty__description {
    color: #8892b0;
  }
}

:deep(.el-skeleton) {
  .el-skeleton__item {
    background: rgba(139, 92, 246, 0.1);
  }
}

:deep(.el-result) {
  .el-result__title {
    color: #e6e6e6;
  }

  .el-result__subtitle {
    color: #8892b0;
  }
}
</style>
